<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>剪切板同步</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .c-item {
            width: auto;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 8px;
            margin: 0 0 10px;
        }

        .c-item img {
            max-height: 300px;
            width: auto;
        }

        .c-item:focus-visible {
            outline: none;
        }

        #input {
            word-break: break-all;
        }

        #input:focus-visible {
            outline: none;

        }

        #sync {
            -webkit-user-select: none;
            /* 禁止 DIV 中的文本被鼠标选中 */
            -moz-user-select: none;
            /* 禁止 DIV 中的文本被鼠标选中 */
            -ms-user-select: none;
            /* 禁止 DIV 中的文本被鼠标选中 */
            user-select: none;
        }

    </style>
</head>

<body style="background-color: #5c5c5c;">
    <div style="height: calc(100vh - 60px);display: flex;flex-direction: column; padding: 0 10px 20px;">
        <h2 style="text-align: center;padding: 10px 0;">剪切板同步</h2>
        <div id="content" style="flex: 1;overflow-y: auto;">
        </div>
    </div>
    <div style="min-height: 40px;display: flex;margin-top: 10px; position: relative;padding: 0 10px;">
        <div id="input" contenteditable="true" style="flex: 1;padding: 5px;border-radius: 6px;border: 1px solid #ccc;"></div>
        <div style="width: 70px;display: flex;flex-direction: column;">
            <div style="flex: 1;"></div>
            <div id="sync" style="height: 40px;background-color: #66ccff;padding: 0 16px;display: flex;align-items: center;text-align: center;color: #fff;cursor: pointer;border-radius: 6px;">发送</div>
        </div>
    </div>
</body>
<script>
    async function ctrl_v(data) {
        showContent(data);
    }

    function showContent(base64Data) {
        if (!base64Data) return;
        let c = decodeURIComponent(atob(base64Data));
        let div = document.createElement('div');
        div.className = 'c-item';
        div.setAttribute('contenteditable', true);
        div.innerHTML = c;
        document.getElementById('content').appendChild(div);
    }
    document.getElementById('sync').onclick = function () {
        let html = document.getElementById('input').innerHTML;
        if (!html) return;
        let data = btoa(encodeURIComponent(html))
        ctrl_c(data)
        showContent(data)
        document.getElementById('input').innerHTML = '';
    }

</script>
<script src="./ctrl_c_sync.js"></script>

</html>
